<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嘻嘻</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <style>
        body {
            min-width: 320px;
            max-width: 750px;
            margin: 0 auto !important;
            background-color: #ffffff;
            position: relative;
        }

        @media screen and (min-width: 750px) {
            html {
                font-size: 37.5px !important;
            }
        }

        .box {
            width: 100%;
            height: 100vh;
            background: -webkit-linear-gradient(pink, rgb(5, 130, 214));
        }

        .man {
            position: absolute;
            top: 1.6rem;
            left: 1rem;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            overflow: hidden;
            border: 0.1333rem solid #fff;
            z-index: 999;
        }

        .woman {
            position: absolute;
            top: 1.6rem;
            right: 1rem;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            overflow: hidden;
            border: 0.1333rem solid #fff;
            z-index: 999;

        }

        .love {
            position: absolute;
            top: 1.9rem;
            left: 50%;
            transform: translateX(-50%);
            width: 2rem;
            height: 2rem;
            z-index: 999;

        }

        .bg {
            position: absolute;
            top: 1.3rem;
            width: 100%;
            height: 3.5rem;
            background-color: rgba(250, 250, 250, 0.6);
        }

        .ryq {
            position: absolute;
            top: 6rem;
            width: 100%;
            height: 3rem;

        }

        .ryqdan {
            position: relative;
            width: 2rem;
            height: 2rem;
            margin-top: .3667rem;
        }

        .ryqdan::before {
            content: '色鬼的生日';
            position: absolute;
            font-size: .5333rem;
            top: .4667rem;
            right: -2.6333rem;
        }

        .ryqdan::after {
            content: '11月3日';
            position: absolute;
            font-size: .5333rem;
            top: 1.09rem;
            right: -2.6333rem;
        }

        .yyy {
            position: absolute;
            top: 9rem;
            width: 100%;
            height: 3rem;

        }

        .yyydan {
            position: relative;
            width: 2rem;
            height: 2rem;
            margin-top: .3667rem;
        }

        .yyydan::before {
            content: '宝贝的生日';
            position: absolute;
            font-size: .5333rem;
            top: .4667rem;
            right: -2.6333rem;
        }

        .yyydan::after {
            content: '10月23日';
            position: absolute;
            font-size: .5333rem;
            top: 1.09rem;
            right: -2.6333rem;
        }

        .timeout {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            width: 3rem;
            height: 2rem;
            line-height: 2rem;
            z-index: 999;
            font-size: .9rem;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="man">
            <img src="./image/man.jpg">
        </div>
        <div class="woman">
            <img src="./image/woman.jpg">
        </div>
        <div class="love">
            <img src="./image/love.png" alt="">
        </div>
        <div class="bg">
        </div>
        <div class="ryq">
            <div class="ryqdan"><img src="./image/ryq.png"></div>
            <div class="timeout ryqtime">21天</div>
        </div>
        <div class="yyy">
            <div class="yyydan"><img src="./image/yyy.png"></div>
            <div class="timeout yyytime">21天</div>
        </div>
    </div>
    <script src="./js/07-flexible分析.js"></script>
    <script>
        function countdown(time) {
            var now = +new Date();
            var inputtime = +new Date(time);
            var times = (inputtime - now) / 1000;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            return (d + '天');
        }
        var ryq = document.querySelector('.ryqtime');
        var yyy = document.querySelector('.yyytime');
        ryq.innerHTML = countdown('2023-12-16 00:00:00');
        yyy.innerHTML = countdown('2023-12-06 00:00:00');
    </script>
</body>

</html>